<template>
  <div class="app-container">
		<div class="step-title">
			<el-steps :active="active" align-center finish-status="success">
				<el-step title="基本资料"></el-step>
				<el-step title="文档信息"></el-step>
			</el-steps>
		</div>
    <div class="change" v-if="active == 0">
			<p>
				<span>厂家</span>
				<el-input class="userselect" type="text" v-model="tempData.brand" placeholder="请输入厂家" />
			</p>
			<p>
				<span>设备名称</span>
				<el-input class="userselect" type="text" v-model="tempData.commodityName" placeholder="请输入设备名称" />
			</p>
			<p>
			<span>设备部门</span>
				<el-select v-model="tempData.departments" placeholder="请选择设备部门" class="userselect">
					<el-option
						v-for="item in ifydata"
						:key="item.id"
						:label="item.departments"
						:value="item.departments"
					></el-option>
				</el-select>
			</p>
			<p>
				<span>单位</span>
				<el-input class="userselect" type="text" v-model="tempData.nuit" placeholder="请输入计量单位" />
			</p>
			<p>
				<span>数量</span>
				<el-input class="userselect" type="number" v-model="tempData.number" placeholder="请输入数量" />
			</p>
			<p>
				<span>备注</span>
				<el-input class="userselect" type="text" v-model="tempData.remarks" placeholder="请输入备注" />
			</p>
			<p>
				<span>尺寸</span>
				<el-input class="userselect" type="text" v-model="tempData.model" placeholder="请输入尺寸" />
			</p>
			<!-- <p>
				<span>参数</span>
				<el-input class="userselect" type="text" v-model="tempData.parameters" placeholder="请输入参数" />
			</p> -->
      <p>
        <span>编号</span>
        <el-input class="userselect" v-model="tempData.bitNumber" type="text" placeholder="请输入位号"/>
      </p>
      <p>
        <span>是否定期检修</span>
        <el-input class="userselect" v-model="tempData.isRepair" type="text" placeholder="请输入是否定期检修" />
      </p>
      <p>
        <span>定期检修周期</span>
        <el-input class="userselect" v-model="tempData.repairPeriod" type="text" placeholder="请输入定期检修周期" />
      </p>
			<p>
        <span>润滑方式</span>
        <el-input class="userselect" v-model="tempData.lubrication" type="text" placeholder="请输入润滑方式" />
      </p>
			<p>
        <span>保养类型</span>
        <el-input class="userselect" v-model="tempData.texture" type="text" placeholder="请输入保养类型" />
      </p>
			<p>
			  <span>固定资产编号</span>
			  <el-input class="userselect" v-model="tempData.assetnumber" type="text" placeholder="请输入固定资产编号" />
			</p>
			<p>
			  <span>重量</span>
			  <el-input class="userselect" v-model="tempData.allkg" type="text" placeholder="请输入重量" />
			</p>
			<p>
			  <span>安装时间</span>
			  <el-input class="userselect" v-model="tempData.installtime" type="text" placeholder="请输入安装时间" />
			</p>
			<p>
			  <span>使用时间</span>
			  <el-input class="userselect" v-model="tempData.usetime" type="text" placeholder="请输入使用时间" />
			</p>
			<p>
			  <span>承包人</span>
			  <el-input class="userselect" v-model="tempData.rateOfWork" type="text" placeholder="请输入承包人" />
			</p>
			<p>
			  <span>责任人</span>
			  <el-input class="userselect" v-model="tempData.maintainPerson" type="text" placeholder="请输入责任人" />
			</p>
			<p>
				<span>图片</span>
				<el-upload
					class="avatar-uploader"
					action
					:http-request="designUpAvatar"
					:show-file-list="false"
				>
					<img v-if="tempData.imgurl" :src="tempData.imgurl" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</p>
    </div>
		<div class="fileup" v-if="active == 1">
			<div class="uping" v-for="(item,index) in fileNum" :key="index">
				<p>
					<span>资料名</span>
					<input v-model="item.filename" type="text" placeholder="请输入您要上传的资料名" />
				</p>
				<p>
					<span>上传资料</span>
					<el-upload
						class="upload-demo"
						drag
						:data="index"
						:show-file-list="false"
						:http-request="designUpFile"
						action=""
						:multiple='false'
						limit='1'
						>
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					</el-upload>
					<p style="margin: 0;">
						<strong v-if="item.filePath">{{item.filename}}</strong>
						<strong v-if="item.filePath" @click="downLoad(item.filePath)">下载<i class="el-icon-download" /></strong>
					</p>
				</p>
				<i class="el-icon-close delete" @click="deleteFile(item,index)"></i>
			</div>
		</div>
		<div class="submits">
			<div class="save" @click="prev" v-if="active != 0">上一步</div>
			<div class="save" @click="next" v-if="active < 1">下一步</div>
			<div class="add" @click="addfile" v-if="active == 1">新增文档</div>
			<div class="save" :class="isClick ? 'disable' : ''" @click="nosave" v-if="active == 1">保存</div>
		  <!-- <div class="save" :class="isClick ? 'disable' : ''" @click="save">保存</div> -->
		  <div class="nosave" @click="nosave">取消</div>
		</div>
  </div>
</template>

<script>
	import { updateDepartment,updateChildrenDepartment,addDepartment } from '@/api/bumen'
	import { uploadFile,getUserFiles,addPeople,updatePeople,deletePeople,getBumenNew } from '@/api/people'
	let fatherid = null
	export default {
		data(){
			return{
				tempData: {},
				writeOradd: 0,   //增加还是修改0增加1修改
				fileNum: [{
					filename: '',
					filePath: ''
				}],
				active: 0,
				isClick: false,
				ifydata: []
			}
		},
		mounted() {
			this.bumenList()
			console.log(this.$route.params)
			if(this.$route.params.options){
				let wanshan = JSON.parse(this.$route.params.options)
				console.log(wanshan)
				this.tempData = wanshan
				this.writeOradd = 1
				fatherid = wanshan.id
				this.getFilesList(fatherid)
			}else{
				this.writeOradd = 0
			}
			if(this.$route.params.type == 'one') {
				this.oneOrtwo = 1
			} else {
				this.oneOrtwo = 2
			}
			console.log(this.oneOrtwo)
			console.log(this.tempData)
		},
		methods:{
			next() {
				if(this.active == 0){
					this.save()
				}
				if (this.active++ > 2) {
					this.active = 0;
				}
			},
			prev() {
				if (this.active-- < 1) {
					this.active = 0;
				}
			},
			// 部门列表
			bumenList(){
				getBumenNew({}).then(res => {
					console.log(res)
					let temp = res.data.filter(item => item.ids === '456')[0].departmentsList
					console.log(temp)
					this.ifydata = temp;
				})
			},
			// 获取商品文档信息
			getFilesList(id){
				getUserFiles({parentId: id}).then(res => {
					console.log(res)
					if(res.data.list.length != 0){
						this.fileNum = []
						res.data.list.map(item => {
							this.fileNum.push({
								filename: item.fileDescribe,
								filePath: item.fileName,
								fileid: item.fileId
							})
						})
					}
				})
			},
			downLoad(filepath){
				window.location.href = filepath
			},
			// 保存
			// saveOrder(item) {
      //   this.$router.go(-1)
			// },
			// 上传商品文件
			designUpFile(item) {
				console.log('新增文档')
				const loading = this.$loading({
          lock: true,
          text: '上传中请稍等...',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        })
				console.log(item)
				var formData = new FormData()
				formData.append("file", item.file)
				formData.append('content', this.fileNum[item.data].filename)
				uploadFile(formData).then(res => {
					console.log(res)
					this.fileNum[item.data].filePath = res
					this.$forceUpdate()
					this.uploadOver = true
					// 如果有fileid证明是修改
					if(this.fileNum[item.data].fileid){
						updatePeople({
							fileName: res,
							fileDescribe:this.fileNum[item.data].filename,
							parentId: fatherid,
							fileId: this.fileNum[item.data].fileid
						}).then(res => {
							console.log(res)
							loading.close()
							this.$message({
								showClose: true,
								message: '添加成功',
								type: "success"
							})
						})
					}else{
						addPeople({fileName: res,fileDescribe:this.fileNum[item.data].filename,parentId: fatherid}).then(res => {
							console.log(res)
							loading.close()
							this.$message({
								showClose: true,
								message: '添加成功',
								type: "success"
							})
						})
					}
				})
			},
			addfile(){
				this.fileNum.push({
					filename: '',
					filePath: ''
				})
			},
			save(){
				if(this.writeOradd == 1){
					this.isClick = true
					this.tempData.id = fatherid
					updateDepartment(this.tempData).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
						})
						this.isClick = false
						// this.$router.go(-1)
					}).catch(res => {
						this.isClick = false
					})
				}else{
					this.isClick = true
					this.tempData.ptype = 'dianqi'
					this.tempData.states = 9
					addDepartment(this.tempData).then(res => {
						console.log('一级分类',res)
						this.$message({
							message: res.message,
							type: "success"
						});
						fatherid = res.data.id
						this.isClick = false
					});
				}
				
			},
			nosave(){
				const devicePage = sessionStorage.getItem('devicePage')
				this.$router.push({
					name: 'Electricallist',
					params: {
						devicePage: devicePage
					}
				})
				// this.$router.go(-1)
			},
			deleteFile(item,index){
				console.log(item)
				if(item.fileid){
					deletePeople(item.fileid).then(res => {
						console.log(res)
						this.$message({
							message: '删除成功！',
							type: 'success'
						})
						this.getFilesList(fatherid)
					})
				}else{
					this.fileNum.splice(index,1)
				}
			},
			// 上传头像
			designUpAvatar(item) {
				const loading = this.$loading({
					lock: true,
					text: '上传中请稍等...',
					spinner: 'el-icon-loading',
					background: 'rgba(255, 255, 255, 0.8)'
				})
				console.log(this.fileNum);
				var formData = new FormData();
				formData.append("file", item.file);
				uploadFile(formData).then(res => {
					console.log(res)
					loading.close()
					this.$message({
						showClose: true,
						message: "添加成功",
						type: "success"
					})
					// this.imageUrl = res
					this.tempData.imgurl = res;
					this.$forceUpdate();
				}).catch(() =>{
					loading.close()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.disable{
		pointer-events: none;
		background: #808080 !important;
	}
	.step-title{
		background: #fff;
		border-radius: 8px 8px 0 0;
		padding-top: 20px;
	}
	.change {
	  display: flex;
	  flex-wrap: wrap;
	  background: #fff;
	  border-radius: 8px;
	  padding: 20px;
	  > p {
	    width: 33%;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    color: #333;
			padding-right: 30px;
	    /deep/.el-input__inner {
	      // width: inherit;
	      background: none;
	      height: 32px;
	      // line-height: 32px;
	      color: #333;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding: 0 25px;
	    }
	    /deep/.el-input__icon {
	      line-height: 32px;
	    }
	    .userselect {
	      // max-width: 250px;
	      flex: 1;
	    }
	
	    > span {
	      display: block;
	      width: 100px;
	      text-align: right;
	      padding-right: 15px;
	    }
	    > input {
	      width: inherit;
	      flex: 1;
	      height: 32px;
	      border-radius: 3px;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding-left: 10px;
	      color: #333;
	    }
	  }
	}
	.avatar-uploader .el-upload {
	  border: 1px dashed #999 !important;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  width: 100%;
	}
	.avatar-uploader .el-upload:hover {
	  border-color: #409eff;
	}
	
	.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 100px;
	  height: 100px;
	  line-height: 100px;
	  text-align: center;
		border: 1px solid #ccc;
	}
	.avatar {
	  width: 100px;
	  height: 100px;
	  display: block;
	}
	.submits {
	  display: flex;
		background: #fff;
	  padding: 20px 20px;
		border-radius: 8px;
		margin-top: 20px;
		// border-top: 1px solid #ccc;
	  justify-content: flex-end;
	  align-items: center;
	  > div {
	    width: 80px;
	    height: 32px;
	    text-align: center;
	    line-height: 32px;
	    color: #fff;
	    font-size: 14px;
	    border-radius: 4px;
	    margin-left: 30px;
	    cursor: pointer;
		}
		.add{
			background: #18a05e;
		}
	  .save {
	    background: #18a05e;
	  }
	  .nosave {
	    background: #999;
	  }
	}
	.fileup{
    position: relative;
    padding: 20px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-wrap: wrap;
    // align-items: center;
    justify-content: space-between;
    .uping{
			width: 48%;
			position: relative;
      display: flex;
      flex-wrap: wrap;
			flex-direction: column;
			&:hover .delete{
				display: block;
			}
      > p {
        width: 90%;
        font-size: 14px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        color: #333;
        /deep/.el-input__inner {
          // width: inherit;
          background: none;
          height: 32px;
          // line-height: 32px;
          color: #333;
          border: 1px solid rgba(0, 0, 0, 0.1);
          padding: 0 25px;
        }
        /deep/.el-input__icon {
          line-height: 32px;
        }
        /deep/.el-upload-dragger {
          width: 100%;
          height: 100px;
        }
        /deep/.el-upload-dragger .el-icon-upload {
          font-size: 60px;
          color: #C0C4CC;
          margin: 0; 
          line-height: 1;
          width: 100%;
        }
        /deep/.el-upload {
          width: 100%;
        }
        .userselect {
          // max-width: 250px;
          flex: 1;
        }
      
        > span {
          display: block;
          width: 100px;
          text-align: right;
          padding-right: 15px;
        }
        > input {
          width: inherit;
          flex: 1;
          height: 32px;
          border-radius: 3px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          padding-left: 10px;
          color: #333;
        }
        >strong{
          display: inline-block;
          padding-left: 100px;
          font-weight: 100;
          font-size: 14px;
          &:last-child{
            cursor: pointer;
            color: #13ce66;
            font-weight: 600;
          }
        }
        >div{
          width: inherit;
          flex: 1;
        }
			}
			.delete{
				position: absolute;
				z-index: 99;
				top: 0px;
				right: 10px;
				cursor: pointer;
				transition: all .5s;
				display: none;
			}
    }
  }
</style>